import React from 'react';
import { connect } from 'dva';
import {
  Tabs,
  NavBar,
  Icon,
  Popover,
  Button,
  List,
  Modal,
  InputItem,
  Checkbox,
  TextareaItem,
  ActivityIndicator,
} from 'antd-mobile';
import styles from './index.less';
import { routerRedux } from 'dva/router';
import Tab1 from './Tab1';
import Tab2 from './Tab2';
import Tab3 from './Tab3';
import Tab4 from './Tab4';
import Tab5 from './Tab5';

const Item = Popover.Item;

class index extends React.Component {
  constructor(props) {
    super(props);
  }
  showAlert = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'detail/show',
    });
  };
  hideAlert = (flow, item) => {
    const { dispatch } = this.props;
    const { idx_CanHandAttitude } = flow;
    if (parseInt(idx_CanHandAttitude) === 0) {
      dispatch({
        type: 'detail/submit',
        payload: { item },
      });
    } else {
      dispatch({
        type: 'detail/submit',
        payload: { item },
      });
    }
  };
  checkProcess = (val) => {
    console.log(this.props);
    const { dispatch, detail } = this.props;
    const { flowIndex } = detail.detail;
    dispatch({
      type: 'detail/process',
      payload: { parocess: val, flowIndex },
    });
  };
  onSelect = (item, k, t = 0) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'detail/process',
      payload: { parocess: 'block', flowIndex: k },
    });
    if (t === 1) {
      dispatch({
        type: 'detail/validate',
      });
    }
  };
  select = (inx) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'detail/select',
      payload: { selectIndex: inx },
    });
  };
  onInput = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'detail/input',
      payload: { message: e },
    });
  };
  queryContacts = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'detail/goContacts',
    });
    dispatch(
      routerRedux.push({
        pathname: '/contacts',
      }),
    );
  };
  hideModal = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'detail/hide',
      payload: { close: true },
    });
    dispatch({
      type: 'contacts/hide',
    });
  };
  render() {
    const { detail, dispatch, location, item } = this.props;
    const { contacts } = detail;
    let {
      tabs,
      visible,
      modalVisible,
      process,
      data,
      index,
      loading,
      flowUser,
      flow,
      flowIndex,
      flowUserIndex,
      selectIndex,
      message,
      label,
      disabled,
      personList,
    } = detail.detail;
    if (message.indexOf(label) !== 0) {
      message = label + message;
    }
    const query = (location.query && location.query.item) || item;
    index === undefined ? (index = 0) : (index = index);
    let View;
    if (index === 0) {
      View = <Tab1 {...detail.detail} />;
    } else if (index === 2) {
      View = <Tab3 {...detail.detail} />;
    } else if (index === 3) {
      View = <Tab4 {...detail.detail} />;
    } else if (index === 4) {
      View = <Tab5 {...detail.detail} />;
    } else if (index === 1) {
      View = <Tab2 {...detail.detail} />;
    }
    return (
      <div className={styles.flex}>
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          leftContent="返回"
          onLeftClick={() => {
            dispatch(
              routerRedux.push({
                pathname: '/index',
              }),
            );
          }}
        >
          待办
        </NavBar>
        <Tabs
          tabs={tabs}
          initialPage={0}
          swipeable={false}
          style={{ flex: 1, paddingBottom: 100 }}
          onChange={(tab, index) => {}}
          onTabClick={(tab, index) => {
            dispatch({
              type: 'detail/query',
              payload: { item: query, index },
            });
          }}
        >
          <div
            style={{
              display: 'flex',
              flex: 1,
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: '#fff',
            }}
          >
            {View}
            <Button
              type="primary"
              size="small"
              inline
              className={styles.btn}
              style={{
                width: '80%',
                borderRadius: 10,
                position: 'fixed',
                bottom: 2,
                margin:'auto',
                opacity: data.length > 0 || Object.keys(data).length > 0 ? 1 : 0,
              }}
              onClick={this.showAlert}
            >
              办理
            </Button>
            <Modal visible={modalVisible} transparent className={styles.modalMain}>
              <div
                className={styles.close}
                style={{ position: 'absolute', top: 10, right: 10, fontSize: 15 }}
                onClick={this.hideModal}
              >
                X
              </div>
              <div className={styles.modal}>
                <div>
                  <div className={styles.Vline} />
                  <span>下一环节：</span>
                </div>
                <div className={styles.m}>
                  <div
                    style={{
                      border: '1px solid #108ee9',
                      width: '95%',
                      borderRadius: 5,
                      padding: 5,
                      marginTop: 15,
                      display: 'flex',
                      justifyContent: 'space-between',
                    }}
                    onClick={() => this.checkProcess(process)}
                  >
                    <span>{flow && flow.hfldNextflowstat && flow.hfldNextflowstat[flowIndex]}</span>
                    <span className={styles.triangle} />
                  </div>
                  <div
                    style={{
                      border: '1px solid #cccccc',
                      width: '95%',
                      height: '100%',
                      padding: 5,
                      borderTop: 'none',
                      display: process,
                    }}
                  >
                    <div
                      style={{
                        display: 'flex',
                        flexDirection: 'column',
                        width: '100%',
                        justifyContent: 'center',
                        paddingLeft: 10,
                        alignItems: 'flex-start',
                      }}
                    >
                      {flow &&
                        flow.hfldNextflowstat &&
                        flow.hfldNextflowstat.map((item, k) => (
                          <div
                            style={{
                              width: '100%',
                              paddingTop: 10,
                              paddingBottom: 10,
                            }}
                            onClick={() => this.onSelect(flow.hfldNextflownum, k, 1)}
                            key={k}
                          >
                            {item}
                          </div>
                        ))}
                    </div>
                  </div>
                </div>
                <div>
                  <div style={{ marginTop: 15 }}>
                    <div className={styles.Vline} />
                    <span>办理人：</span>
                  </div>
                  <div
                    style={{
                      width: '100%',
                      height: '100%',
                      paddingTop: 5,
                      paddingBottom: 10,
                      marginBottom: 10,
                      flexWrap: 'wrap',
                      display: 'flex',
                    }}
                    className={styles.m}
                  >
                    <div className={styles.check_item} onClick={() => this.queryContacts()}>
                      {flowUser &&
                        flowUser &&
                        flowUser.map((i, inx) => (
                          <span style={{ marginRight: 10 }} key={inx}>
                            {i.personZW}
                          </span>
                        ))}
                      {contacts &&
                        contacts.allPer &&
                        contacts.allPer.map((i, inx) => (
                          <span
                            style={{
                              marginRight: 10,
                              display: personList.indexOf(i.enName) > -1 ? 'block' : 'none',
                            }}
                            key={inx}
                          >
                            {i.zhName}
                          </span>
                        ))}
                    </div>
                  </div>
                </div>
                <div
                  style={{
                    display:
                      flow && flow.idx_CanHandAttitude && flow.idx_CanHandAttitude === '1'
                        ? 'flex'
                        : 'flex',
                    textAlign: 'left',
                  }}
                >
                  <div className={styles.Vline} style={{ display: 'flex', alignItems: 'center' }} />
                  <span
                    style={{
                      display: 'inline-block',
                      position: 'relative',
                    }}
                  >
                    办理意见：
                  </span>
                </div>
                <div>
                  <div
                    style={{
                      width: '100%',
                      borderRadius: 5,
                      padding: 5,
                      marginTop: 5,
                      display:
                        flow && flow.idx_CanHandAttitude && flow.idx_CanHandAttitude === '1'
                          ? 'block'
                          : 'block',
                    }}
                  >
                    <div
                      style={{
                        display: 'flex',
                        flexWrap: 'wrap',
                        width: '100%',
                        justifyContent: 'center',
                        paddingLeft: 10,
                      }}
                      className={styles.box}
                    >
                      <div className={styles.operation} onClick={() => this.select(0)}>
                        <span
                          style={{
                            color: selectIndex === 0 ? '#108ee9' : '#fff',
                            borderColor: selectIndex === 0 ? '#108ee9' : '#ccc',
							
                          }}
                        >
                          ●
                        </span>
                        <span>发</span>
                      </div>
                      <div className={styles.operation} onClick={() => this.select(1)}>
                        <span
                          style={{
                            color: selectIndex === 1 ? '#108ee9' : '#fff',
                            borderColor: selectIndex === 1 ? '#108ee9' : '#ccc',
                          }}
                        >
                          ●
                        </span>
                        <span>已阅</span>
                      </div>
                      <div className={styles.operation} onClick={() => this.select(2)}>
                        <span
                          style={{
                            color: selectIndex === 2 ? '#108ee9' : '#fff',
                            borderColor: selectIndex === 2 ? '#108ee9' : '#ccc',
                          }}
                        >
                          ●
                        </span>
                        <span>同意</span>
                      </div>
                      <div className={styles.operation} onClick={() => this.select(3)}>
                        <span
                          style={{
                            color: selectIndex === 3 ? '#108ee9' : '#fff',
                            borderColor: selectIndex === 3 ? '#108ee9' : '#ccc',
                          }}
                        >
                          ●
                        </span>
                        <span>拟同意</span>
                      </div>
                    </div>
                    <TextareaItem
                      style={{
                        border: '1px solid #ccc',
                        minHeight: 100,
                        width: '85%',
                      }}
                      placeholder="请手动填写意见"
                      onChange={this.onInput}
                      value={message}
                      autoHeight
                    />
                  </div>
                  <Button
                    type="primary"
                    size="small"
                    inline
                    disabled={disabled}
                    onClick={() => this.hideAlert(flow, { label, message })}
                    style={{ width: '100%', margin: 20, borderRadius: 5 }}
                    className={styles.btn}
                  >
                    {flow && flow.idx_CanHandAttitude && flow.idx_CanHandAttitude === '1'
                      ? '提交'
                      : '提交'}
                  </Button>
                </div>
              </div>
            </Modal>
          </div>
        </Tabs>
        <ActivityIndicator toast text="加载中..." animating={loading} />
      </div>
    );
  }
}

export default connect((detail, contacts) => ({ detail, contacts }))(index);
